<template>
    <el-container>
        <el-header>
            <el-menu :default-active="activeIndex" menu-trigger="click" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1" @click="song = song_history;artist = art_history;isHistory = true">我的记录</el-menu-item>
                <el-submenu index="2">
                    <template slot="title">热门歌曲</template>
                    <el-menu-item :index="key" v-for="(item,key,index) in typeList" v-bind:key="key">{{item}}</el-menu-item>
                </el-submenu>
            </el-menu>
        </el-header>
        <el-main>
            <el-col :span="24"><audio id="videos" src="" autoplay controls="controls" style="width:100%;" @ended="songend"/></el-col>
            <el-col :span="24" style="font-size:.6rem;">
                <el-alert
                :title="songtitle?'正在播放':'暂未播放'"
                :type="songtitle?`success`:`info`"
                :description="songtitle?songtitle:''"
                :closable="false">
                </el-alert>
            </el-col>
            <el-col :span="18"><el-input v-model="songname" placeholder="请输入歌手或歌名"></el-input></el-col>
            <el-col :span="6"><el-button @click="searchsong()" type="primary">搜 索</el-button></el-col>
            <el-col :span="24">
                <el-select v-model="playtype" placeholder="请选择">
                    <el-option
                        v-for="item in selectbox"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
            <el-table
                :data="song"
                style="width: 100%">
                <el-table-column
                    prop="artistname"
                    label="播放"
                    width="50">
                    <template slot-scope="scope">
                        <i :class="scope.$index==songindex?`el-icon-service`:`el-icon-caret-right`" @click="getsong(scope.row,scope.$index)"></i>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="songname"
                    label="歌名"
                    sortable
                    width="120">
                    <template slot-scope="scope">
                        {{scope.row.songname||scope.row.title}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="artistname"
                    label="歌手"
                    width="70">
                    <template slot-scope="scope">
                        {{scope.row.artistname||scope.row.author}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="$index"
                    label=""
                    width="50">
                    <template slot-scope="scope">
                        <i class="el-icon-remove" @click="delsong(scope.$index)"></i>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @current-change="nextpage"
                :current-page.sync="page"
                :page-size="10"
                layout="prev, next, jumper"
                :total="pageTotal" v-if="!isHistory">
            </el-pagination>

            <el-table
                :data="artist"
                style="width: 100%">
                <el-table-column
                    prop="artistname"
                    label="选择"
                    width="50">
                    <template slot-scope="scope">
                        <i class="el-icon-zoom-in" @click="artsong(scope.row)"></i>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="artistname"
                    label="歌手"
                    sortable
                    width="120">
                    <template slot-scope="scope">
                        {{scope.row.artistname}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="artistpic"
                    label="封面"
                    width="120">
                    <template slot-scope="scope">
                        <img :src="scope.row.artistpic" style="height:2rem;"/>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>

    </el-container>
</template>

<script>
    export default {
        name: "Index",
        components: {},
        data() {
            return {
                activeIndex:'1',
                songname:'',
                songindex:-1,
                now_type:1,
                offset:0,
                sizes:20,
                baseUrl: 'http://tingapi.ting.baidu.com/v1/restserver/ting',
                typeList:{
                    1:'最新歌曲榜',
                    2:'热门歌曲榜',
                    11:'热门摇滚歌曲',
                    14:'热门影视歌曲',
                    20:'华语金曲榜',
                    21:'欧美金曲榜',
                    22:'经典老歌榜',
                    23:'热门对唱歌曲',
                    25:'热门网络歌曲'
                },
                artist:[],
                song:[],
                song_history:[],
                art_history:[],
                songtitle:'',
                offset:0,
                size:10,
                page:1,
                pageTotal:1,
                isHistory:false,
                playtype:1,
                selectbox:[
                    {
                    value: 1,
                    label: '列表循环'
                    },
                    {
                        value: 2,
                        label: '随机循环'
                    },
                    {
                        value: 3,
                        label: '单曲循环'
                    }
                ]
            }
        },
        mounted() {
            this.getType(this.now_type);
            var history = localStorage.getItem('song_history');
            if(history==null) history = '[]';
            this.song_history = JSON.parse(history);
            var art_history = localStorage.getItem('art_history');
            if(art_history==null) art_history = '[]';
            this.art_history = JSON.parse(art_history);
        },
        methods: {
            handleSizeChange(){
                this.page = 1;
                this.offset = 0;
            },
            handleSelect(key, keyPath) {
                this.activeIndex = keyPath[0];
                if(keyPath.length==2 && keyPath[0] == '2'){
                    this.getType(key);
                }
            },
            songend(evt){
                var evt = evt || event;
                if(evt.type == 'ended'){
                    console.log(this.playtype);
                    if(this.playtype==1){
                        this.songindex = this.songindex<this.song.length-1 ? this.songindex+1 : 0;
                    }else if(this.playtype==2){
                        this.songindex = Math.round(Math.random()*(this.song.length-0.5));
                    }
                    this.getsong(this.song[this.songindex],this.songindex);
                }
            },
            query: function(query,callback){
                let _this = this;
                let loadingInstance = _this.$elementui.Loading.service();
                $.ajax({
                    type:'get',
                    dataType:'jsonp',
                    url:_this.baseUrl + '?' + query,
                    timeout:5000,
                    success:function(data){
                        callback(data);
                    },
                    error:function(hxr,status,err){
                        alert(err);
                    },
                    complete:function(){
                        loadingInstance.close();
                    }
                });
            },
            getList: function(type){
                let _this = this;
                var type = parseInt(type);
                if(this.typeList[type] === undefined) type = 1;
                this.now_type = type;
                this.isHistory = false;
                var query = 'method=baidu.ting.billboard.billList&type='+(type||1)+'&size='+this.sizes+'&offset='+this.offset;
                this.query(query,function(data){
                    _this.song = data.song_list;
                    _this.pageTotal = parseInt(data.billboard.billboard_songnum);
                });
            },
            getType: function(type){
                if(type != this.now_type){
                    this.now_type = type;
                    this.page = 1;
                    this.offset = 0;
                }
                this.isHistory = false;
                this.getList(this.now_type);
            },
            getsong: function(song,index){
                let _this = this;
                var songid = song.songid || song.song_id;
                var query = 'method=baidu.ting.song.play&songid='+songid;
                this.songindex = index;
                this.query(query,function(data){
                    if(typeof data.bitrate.file_link == 'undefined'){
                        $('#videos').stop();
                        $('#videos').attr('src','');
                        _this.$notify.error({
                            title: '错误',
                            message: '错误:歌曲不存在',
                            duration:2000
                        });
                    }else{
                        $('#videos').stop();
                        $('#videos').attr('src',data.bitrate.file_link);
                        _this.songtitle = data.songinfo.title;
                        document.title = _this.songtitle + ' - 音乐盒子';
                    }
                });
                var song_history = this.song_history;
                this.song_history = [];
                for(var sng in song_history){
                    if(song_history[sng].song_id == songid || song_history[sng].songid == songid){
                        return;
                    }
                }
                song_history.push(song);
                this.song_history = song_history;
                localStorage.setItem('song_history',JSON.stringify(song_history));
            },
            delsong(sindex){
                this.song.splice(sindex,1);
                if(sindex==this.songindex){
                    $('#videos').stop();
                    $('#videos').attr('src','');
                    this.songindex = -1;
                    return;
                }
                if(sindex<this.songindex) this.songindex--;
                if(this.isHistory){
                    this.song_history = this.song;
                    localStorage.setItem('song_history',JSON.stringify(this.song_history));
                }
            },
            getlrc: function(songid){
                var query = 'method=baidu.ting.song.lry&songid='+songid
                this.query(query,function(data){
                    console.log(data);
                })
            },
            searchsong:function(){
                let _this = this;
                _this.artist = [];
                _this.song = [];
                this.pageTotal = 1;
                this.isHistory = false;
                var query = 'method=baidu.ting.search.catalogSug&query='+this.songname;
                this.query(query,function(data){
                    if(data.artist){
                        _this.artist = data.artist;
                    }
                    if(data.song){
                        _this.song = data.song;
                    }
                })
            },
            artsong: function(art){
                let _this = this;
                var artid = art.artistid;
                _this.song = [];
                this.isHistory = false;
                this.pageTotal = 1;
                var query = 'method=baidu.ting.artist.getSongList&tinguid='+artid;
                this.query(query,function(data){
                    _this.song = data.songlist;
                })
                var art_history = this.art_history;
                this.art_history = [];
                for(var ar in art_history){
                    if(art_history[ar].artistid == artid){
                        return;
                    }
                }
                art_history.push(art);
                this.art_history = art_history;
                localStorage.setItem('art_history',JSON.stringify(art_history));
            },
            nextpage: function(val){
                this.offset = (val-1)*10;
                this.page = val;
                this.isHistory = false;
                this.getType(this.now_type);
            }
        }
    }
</script>
<style lang="scss" scoped>
    .el-col {
        margin:0.1rem 0;
    }
    i {
        font-size:0.9rem;
    }
</style>
